body, html {
  line-height: 1;
  font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif, 'Droid Sans Fallback';
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: $color-background;
  color: $color-text;
}
.absoluteclass { 
  position: relative;
}
.slider{
  &-enter{
    &-from{
      transform: translateX(100%);
    }
    &-active{
      transition: all 1.0s;
    }
    &-to{
      transform: translateX(0);
    }
  }
  &-leave{
    &-from{
      transform: translateX(0);
    }
    &-active{
      transition: all 1.0s;
    }
    &-to{
      transform: translateX(100%);
    }
  }
}

.playmin{
  &-enter{
    &-from{
      transform: translateY(100%);
      opacity: 0;
    }
    &-active{
      transition: all 1.0s;
    }
    &-to{
      transform: translateY(0);
      opacity: 1;
    }
  }
  &-leave{
    &-from{
      transform: translateY(0);
      opacity: 1;
    }
    &-active{
      transition: all 1.0s;
    }
    &-to{
      transform: translateY(100%);
      opacity: 0;
    }
  }
}

.playview{
  &-leave{
    &-from{
      transform: scale(1);
      opacity: 1;
    }
    &-active{
      transform-origin: -100% 100%;
      transition: all 1.0s;
    }
    &-to{
      transform: scale(0);
      opacity: 0;
    }
  }
}
//顶部动画
@keyframes topmov {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
//cd动画
@keyframes cdmov {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.playlist{
  &-enter{
    &-from{
      opacity: 0;
      &>.contain{
        transform: translateY(100%);
      }
    }
    &-active{
      transition: all 1.0s;
      &>.contain{
        transition: all 1.0s;
      }
    }
    &-to{
      opacity: 1;
      &>.contain{
        transform: translateY(0);
      }
    }
  }
  &-leave{
    &-from{
      opacity: 1;
      &>.contain{
        transform: translateY(0);
      }
    }
    &-active{
      transition: all 0.5s;
      &>.contain{
        transition: all 0.5s;
      }
    }
    &-to{
      opacity: 0;
      &>.contain{
        transform: translateY(100%);
      }
    }
  }
}

.listone{
  &-enter{
    &-from{
      height: 0;
    }
    &-active{
      transition: all 0.3s;
    }
    &-to{
      height: 40px;
    }
  }
  &-leave{
    &-from{
      height: 40px;
    }
    &-active{
      transition: all 0.3s;
    }
    &-to{
      overflow: hidden;
      height: 0 !important;
    }
  }
}
